<template>
	<view>	
		<!-- 上层信息框 -->
		<view class="topInfo baseBack">
			<view class="cardNumber"></view>
			<view style="color:#AC58FA;margin-top: 20rpx;margin-left: 10rpx;margin-right: auto;">{{formData.title}}</view>
			<view style="margin-right: 50rpx;margin-top: 50rpx;color:grey;">{{formData.comName}}</view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>
		
		<!-- 中层信息框 -->
		<view class="middleInfo baseBack">

      <view style="padding-bottom: 10rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;"> 创建时间：</text>
        <text class="pv">{{formData.createTime}}</text>
      </view>
	  <view style="padding-bottom: 15rpx; color: grey;">
	    <view class="pp"></view>
	    <text style=" letter-spacing: 10rpx;">布种名称：</text>
	    <text class="pv">{{formData.clName}}</text>
	  </view>
	  <view style="padding-bottom: 15rpx; color: grey;">
	    <view class="pp"></view>
	    <text style=" letter-spacing: 10rpx;">布种类型：</text>
	    <text class="pv">{{formData.clType}}</text>
	  </view>
      <view style="padding-bottom: 15rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;">总任务数：</text>
        <text class="pv">{{formData.num}}</text>
      </view>
	  <view style="padding-bottom: 15rpx; color: grey;">
	    <view class="pp"></view>
	    <text style=" letter-spacing: 10rpx;">已完成数：</text>
	    <text class="pv">{{formData.finish}}</text>
	  </view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>

		<!-- 下层信息框 -->
		<view class="downInfo baseBack">
			<view class="flex">
				<view style="margin-left: auto;margin-right: 40rpx;">
					完成度：
					<text class="price">{{formData.count>100?100:formData.count}}</text>
					<text style="color: #AC58FA;">%</text>
				</view>
			</view>
			<!-- <view style="padding-bottom: 15rpx; color: grey;">
				<view class="pp"></view>
				备注：
				<text class="pv">— —</text>
			</view>	 -->
		</view>
	
		<!-- <watermark :text="companyName"></watermark> -->
	</view>
</template>

<script>
import watermark from 'components/warter/watermark.vue'
export default {
	components:{watermark},
	filters:{
		empDec(value){
			if(!value){
				return ''
			}else{
				return value
			}
		}
	},
	data() {
	  return {
		formData: {
			clName:'',
			clType: '',
			comName: '',
			finish: '',
			num: '',
			createTime:'',
			title: '',
			count:''
		},
	  }
	},
	onLoad(options) {
		// debugger
		if(options.info){
			options.info = options.info.replace(/%/g, '%25');
			this.formData = JSON.parse(decodeURIComponent(options.info));
			let a = Big(this.formData.num);
			let b = Big(this.formData.finish);
			Big.DP = 2;
			this.formData.count = b.div(a).times(100);
		}
	},
	methods:{
		
	}
}
	
	
</script>

<style>
	
	.cardNumber{
		margin-right: auto;
		color: #AC58FA;
		font-size: 45rpx;
		margin: 40rpx 0rpx 40rpx 40rpx;
	}
	
	.topInfo{
		align-items: center;
		display: flex;
		height: 100rpx;
		margin: 48rpx auto 0rpx auto;
	}
	.middleInfo{
		margin: 0rpx auto;
	}
	.downInfo{
		padding-bottom: 40rpx;
		margin: 0rpx auto;
	}
	
	.conUp{
	   width: 92%; 
	   height: 70rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   background-image: radial-gradient(circle at 448rpx 50rpx ,transparent 0%, transparent 8px,#fff 8px, #fff 100%);
	   background-position: 244rpx -16rpx;
	   margin: 0rpx auto;
	}
	
	.splitArea {
	  border: none;
	  border-top: 3rpx dashed #d8d8d8;
	  width: 85%;
	}
	
	.search{
		background-color: #fff;
		height: 100rpx;
	}
	
	.baseBack{
		width: 92%;
		background-color: #fff;
	}
	.price{
		color: #AC58FA;
		font-size: 50rpx;
	}
	.pp {
	  display: inline-block;
	  width: 10rpx;
	  height: 10rpx;
	  border-radius: 50%;
	  background-color: grey;
	  margin: 0rpx 30rpx 0rpx 50rpx;
	}
	.pv{
		font-weight: bold;
		margin-right: 6rpx;
		color: black;
	}
	
</style>